<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link href="<%=basePath%>/css/idangerous.swiper.css" rel="stylesheet" />
<script type="text/javascript" src="<%=basePath%>/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/idangerous.swiper-2.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/jquery.ocupload.js"></script>
<title>龙达飞生活馆2016年广告语有奖征集赢取iPhone6s大奖</title>
<style>
* {
	margin: 0;
	padding: 0;
	font-family: "微软雅黑";
}

.none {
	display: none;
}

li {
	list-style: none;
}

body {
	background: #e7faab;
}

a {
	text-decoration: none;
}

.baiyi-vote-warp {
	margin: 0 auto;
	max-width: 40pc;
}

.baiyi-vote-searhbox {
	overflow: hidden;
	padding: 10px;
}

.baiyi-vote-vote-data {
	padding: 10px;
}

.baiyi-vote-vote-data ul {
	display: -webkit-box;
	display: box;
}

.baiyi-vote-vote-data li {
	border-right: 1px solid #f0f0f0;
	color: #ff2946;
	text-align: center;
	-webkit-box-flex: 1;
}

.baiyi-vote-vote-data li.no {
	border: 0;
}

.search-input {
	float: left;
	padding-right: 10px;
	width: 80%;
}

.search-input input {
	box-sizing: border-box;
	padding: 5px 10px;
	width: 100%;
	height: 35px;
	outline: 0;
	border: 2px solid #ff2946;
	border-radius: 5px;
	background-color: #fff;
	line-height: 35px;
}

.search-btn {
	overflow: hidden;
}

.search-btn a {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 35px;
	border: 1px solid #ff2946;
	border-radius: 5px;
	background-color: #ff2946;
	color: #fff;
	text-align: center;
	font-size: 14px;
	line-height: 35px;
}

.baiyi-vote-content {
	overflow: hidden;
	box-sizing: border-box;
	margin: 0 auto;
	padding-left: 10px;
}

.baiyi-vote-content .item {
	float: left;
	margin-top: 10px;
	width: 50%;
}

.baiyi-vote-content .item .item-content {
	padding-right: 10px;
}

.baiyi-vote-content .item .item-content .box {
	border: 1px solid #f0f0f0;
	background: #fff;
}

.baiyi-vote-content .item .item-content .box .pic {
	position: relative;
	overflow: hidden;
	height: 143px;
	text-align: center;
}

.baiyi-vote-content .item .item-content .box .pic img {
	width: 100%;
	height: 100%;
}

.baiyi-vote-content .item .item-content .box .btnwarp {
	margin: 10px auto;
	text-align: center;
}

.musicwarp {
	margin: 5px auto;
	text-align: center;
}

.baiyi-vote-content .item .item-content .box .info {
	display: -webkit-box;
}

.baiyi-vote-content .item .item-content .box .info span {
	display: block;
	color: #333;
	text-align: center;
	font-size: 9pt;
	line-height: 20px;
	-webkit-box-flex: 1;
}

.baiyi-vote-content .item .item-content .box .info span.g {
	color: green;
}

.baiyi-vote-content .item .item-content .box .info span.r {
	color: red;
}

.btnvote {
	padding: 6px 10px;
}

.btnmusic, .btnvote {
	display: block;
	margin: 5px 10px;
	border-radius: 2px;
	color: #fff;
	font-size: 9pt;
	cursor: pointer;
}

.btnvoted {
	display: block;
	margin: 5px 10px;
	padding: 6px 10px;
	border-radius: 2px;
	background-color: #ccc !important;
	color: #fff;
	font-size: 9pt;
	cursor: pointer;
}

.btnvote:first-child {
	background-color: #f50 !important;
}

.btnvote:nth-child(2) {
	background-color: #ff3963;
}

.btnvote:last-child {
	background-color: #44b549;
}

.baiyi-vote-rule {
	bottom: 0;
	left: 0;
	z-index: 10;
	overflow: hidden;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 100%;
}

.baiyi-vote-rule ul {
	display: -webkit-box;
	display: box;
	padding: 0 4px;
}

.baiyi-vote-rule ul li {
	box-sizing: border-box;
	margin-bottom: 10px;
	padding: 0 2px;
	height: 40px;
	font-size: 1pc;
	line-height: 40px;
	-webkit-box-flex: 1;
}

.baiyi-vote-rule ul li a {
	display: block;
	width: 100%;
	height: 40px;
	border-radius: 4px;
	background: #ff3963;
	color: #fff;
	text-align: center;
	font-size: 14px;
}

.baiyi-copyright {
	padding: 5px 0;
	color: #000;
	text-align: center;
	font-size: 9pt;
}

#loading {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 99;
	margin-top: -73px;
	margin-left: -73px;
}

#loading, #loading .lbk, #loading .lcont {
	width: 146px;
	height: 146px;
}

#loading .lbk, #loading .lcont {
	position: absolute;
}

#loading .lbk {
	top: 0;
	left: 0;
	z-index: 0;
	border-radius: 10px;
	background-color: #000;
	opacity: .5;
}

#loading .lcont {
	top: 0;
	left: 0;
	z-index: 1;
	color: #f5f5f5;
	text-align: center;
	font-size: 14px;
	line-height: 35px;
}

#loading img {
	display: block;
	margin: 30px auto;
	width: 35px;
	height: 35px;
}

.ajaxloading {
	margin: 10px;
	background: #fff;
	color: #44b549;
	text-align: center;
	font-size: 9pt;
	line-height: 30px;
}

.baiyi-vote-join-warp {
	position: relative;
	margin: 10px;
	padding: 10px;
	border: 2px solid #ff2946;
	border-radius: 10px;
	background-color: #fff;
}

.tip {
	padding: 10px 0;
	text-align: center;
	font-size: 1.4rem;
}

.form-group {
	display: -webkit-box;
	margin-bottom: 8px;
}

.form-group label {
	display: inline-block;
	width: 5pc;
	font-weight: 700;
	font-size: 14px;
}

.form-group label .tips {
	font-size: 12px;
	color: #ccc;
}

.form-group .control {
	-webkit-box-flex: 1;
}

.form-group .control input, .form-group .control textarea {
	display: block;
	padding: 6px 0;
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #fff;
	background-image: none;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	color: #555;
	vertical-align: middle;
	font-size: 14px;
	-webkit-transition: border-color ease-in-out .15s, box-shadow
		ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-group .control textarea {
	outline: 0;
	resize: none;
}

.form-group .control .add {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	border: 2px dashed #000;
	vertical-align: middle;
	text-align: center;
}

.form-group .control .preview {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	border: 2px dashed #000;
	vertical-align: middle;
	text-align: center;
	margin-right: 5px;
}

.form-group .control .preview .close {
	position: absolute;
	top: -7px;
	right: -7px;
	display: block;
	width: 14px;
	height: 14px;
	background: #F00;
	border-radius: 7px;
	color: #fff;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
	font-family: Arial;
}

.form-group .control .preview img {
	display: block;
	width: 50px;
	height: 50px;
}

.form-group .control .add:before {
	position: absolute;
	top: 18px;
	left: 23px;
	display: block;
	width: 4px;
	height: 14px;
	background: #000;
	content: "";
}

.form-group .control .add:after {
	position: absolute;
	top: 23px;
	left: 18px;
	display: block;
	width: 14px;
	height: 4px;
	background: #000;
	content: "";
}

.btn-bm {
	display: inline-block;
	padding: 5px 0;
	width: 100%;
	border-radius: 5px;
	background-color: #ff2946;
	color: #fff;
	text-align: center;
}
</style>
</head>
<body>
	<form name="form1" method="post" action="VoteUpload.aspx?uid=1161&amp;openId=FromUserName&amp;sign=&amp;vid=113" id="form1">
		<div class="baiyi-vote-warp">
			<div class="head">
				<div class="swiper-container">
					<ul class="swiper-wrapper">
						<li class="swiper-slide"><a href="javascript:void(0)"><img
								src="<%=basePath%>/images/1.jpg"
								alt="" width="100%" /></a></li>
						<li class="swiper-slide"><a href="javascript:void(0)"><img
								src="<%=basePath%>/images/2.jpg"
								alt="" width="100%" /></a></li>
						<li class="swiper-slide"><a href="javascript:void(0)"><img
								src="<%=basePath%>/images/3.jpg"
								alt="" width="100%" /></a></li>
					</ul>
				</div>
			</div>
			<div class="baiyi-vote-rule">
				<ul class="clearfix">
					<li><a
						href="<%=basePath%>/vote.htm?openId=${openid}">活动首页</a></li>
					<li><a
						href="<%=basePath%>/voteNote.htm?openId=${openid}">活动须知</a></li>
					<li><a
						href="<%=basePath%>/votePrice.htm?openId=${openid}">奖项设置</a></li>
					<li><a
						href="<%=basePath%>/voteRank.htm?openId=${openid}">活动排行</a></li>
					<li><a
						href="<%=basePath%>/voteUpload.htm?openId=${openid}">我要报名</a></li>
				</ul>
			</div>
			<div class="baiyi-vote-join-warp">
				<div class="title">
					<div
						style="background-color: #ff2946; color: #FFF; text-align: center; border-radius: 5px; padding: 5px 0">参赛报名处</div>
				</div>
				<div class="tip" style="color: #7ba801; font-size: 12px">最多可上传1张图片</div>
				<div class="form-group">
					<label>参赛姓名：</label>
					<div class="control">
						<input type="text" id="txtname" />
					</div>
				</div>
				<div class="form-group">
					<label>联系电话：</label>
					<div class="control">
						<input type="text" maxlength="11" id="txtmobile" />
					</div>
				</div>
				<div class="form-group">
					<label>上传照片：<span class="tips">(图片大小4M以内)</span></label>
					<div class="control">
						<div class="add"></div>
						<div id="preview_img" style="display: inline-block"></div>
					</div>
				</div>
				<div class="form-group">
					<label>广告宣言：</label>
					<div class="control">
						<textarea id="txtsummary"></textarea>
					</div>
				</div>
				<div class="form-group">
					<label></label>
					<div class="control">
						<a class="btn-bm" id="bm">报名</a>
					</div>
				</div>
			</div>
			<div class="baiyi-copyright">&copy;点讯科技</div>
		</div>
	</form>
</body>
<script>
	var count = 0;
	var img="";
	var loading_asset = '<%=basePath%>/images/loading.gif';
	$(function(){
		if('${error}'=='error'){
			swal({   
				title: "错误",   
						text: "请先关注本微信号！",   
						type: "warning",   
						confirmButtonColor: "#DD6B55",   
						confirmButtonText: "确定",   
						closeOnConfirm: false 
				}, 
				function(){   
					location.href="<%=basePath%>/sub.htm";
				});
			
		}
	})
	function _hideLoading() {
		window.setTimeout(function() {
			var div = document.getElementById('loading');
			if (div)
				div.style.display = 'none';
		}, 250);
	}
	function _showLoading() {
		var div = document.getElementById('loading');
		if (!div) {
			div = document.createElement('div');
			div.style.display = 'none';
			div.id = 'loading';
			div.innerHTML = '<div class="lbk"></div><div class="lcont"><img src="' + loading_asset + '" alt="loading..."/>正在加载...</div>';
			document.querySelector('body').appendChild(div);
		}
		;
		window.setTimeout(function() {
			div.style.top = ($('body').scrollTop + 150) + 'px';
			div.style.display = '';
		}, 150);
	}

	var mySwiper = new Swiper('.swiper-container', {
		calculateHeight : true,
		roundLengths : true,
		loop : true,
		autoplay : 5000
	})

	$(".add")
			.upload(
					{
						name : 'myfiles',
						method : 'post',
						enctype : 'multipart/form-data',
						action : '<%=basePath%>/uploadImg.htm?d='+ new Date(),
						onSelect : function() {
							_showLoading();
						},
						onSubmit : function() {

						},
						onComplete : function(r) {
							_hideLoading();
							if (r) {
									$("#preview_img")
											.append(
													"<div class='preview'><img src='<%=basePath%>/upload/"+r+"' class='imglist'/><i class='close'>x</i></div>");
									img=r;
									bindDelete();
							}
						}
					});
	$("#bm")
			.click(
					function() {
						$(".close").empty();
						var itemname = $("#txtname").val();
						var mobile = $("#txtmobile").val();
						var content = $("#txtsummary").val();
						if (itemname == "") {
							alert("请填写参赛姓名！");
							return false;
						}
						if (mobile == "") {
							alert("请填写联系电话！");
							return false;
						}
						if ($.trim(content) == '') {
							alert("请填写广告宣言!");
							return false;
						}
						if(img==""){
							alert("请先上传图片！");
							return false;
						}
						$.ajax({
									type : "POST",
									url : "<%=basePath%>/joinVote.htm?d="+ new Date(),
									data : {
										name : itemname,
										mobile : mobile,
										img:img,
										content:content
									},
									timeout : 60000,
									async : true,
									beforeSend : function() {
										//缓冲提示
										_showLoading();
									},
									success : function(data) {
										_hideLoading();
										//var data = eval("(" + data + ")");
										if (data=="success") {
											alert("报名成功,赶紧喊上你的小伙伴帮你投票吧！");
											window.location.href = "<%=basePath%>/vote.htm";
										} else {
											alert("报名失败,您可以直接联系我们客服报名！");
										}
									},
									error : function(XMLHttpRequest,
											textStatus, errorThrown) {
										alert("出错:" + XMLHttpRequest.readyState);
									}
								})
					})
	function bindDelete() {
		$(".close").click(function() {
			$(this).parent().remove();
		})
	}
</script>
</html>